<template>
  <div class="me">
    <div class="userInfo">
      <!-- <div v-if="!isHaveUserInfo" class="noLogin">
        <div class="user-icon">
          <img mode="aspectFit" src="/static/img/unlogin.png" alt="">
        </div>
        <div class="login-btn">
          <button
            open-type="getUserInfo"
            lang="zh_CN"
            @getuserinfo="getUserInfo">点击登陆</button>
        </div>
      </div> -->

      <div class="hasLogin">
        <div class="user-icon">
          <img class="img" mode="aspectFit" :src="userInfo.avatarUrl" />
        </div>
        <div class="user-name">{{userInfo.nickName}}</div>
      </div>
    </div>

    <div class="setting">
      <div class="detail">
        <SetBar v-if="!isTenantLogin" icon="icon-zhifu-01" title="充值" @setBarclick="setBarclick">
          <div v-if="userInfo.dueTime" class="recharge-dueTime">
            {{userInfo.dueTime}} 到期
          </div>
          <div v-else class="recharge-noDueTime">
            非会员
          </div>
        </SetBar>
      </div>

      <div class="detail">
        <SetBar icon="icon-fangyuan" title="我的信息" @setBarclick="setBarclick" />
        <SetBar v-if="!isTenantLogin" icon="icon-xiugaimima01" title="修改密码" @setBarclick="setBarclick" />
      </div>

      <div class="detail">
        <SetBar icon="icon-hetongguizeguankong" title="平台规则" @setBarclick="setBarclick" />
        <SetBar icon="icon-guanyu" title="关于我们" @setBarclick="setBarclick" />
      </div>
    </div>

    <div class="logout">
      <button type="warn" lang="zh_CN" @tap="logout">退出当前账号</button>
    </div>
  </div>
</template>

<script>
import SetBar from 'components/SetBar/SetBar'
import { mapState } from 'vuex'
import { logout } from 'api/me'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    'SetBar': SetBar
  },
  computed: {
    ...mapState([
      'userInfo',
      'isTenantLogin'
    ])
  },
  methods: {
    setBarclick (title) {
      switch (title) {
        case '充值':
          wx.navigateTo({
            url: '/pages/recharge/main'
          })
          break
        case '我的信息':
          wx.navigateTo({
            url: '/pages/userInfo/main'
          })
          break
        case '修改密码':
          wx.navigateTo({
            url: '/pages/changePassword/main'
          })
          break
      }
    },
    logout () {
      logout(this.isTenantLogin)
      wx.removeStorageSync('openid')
      wx.removeStorageSync('userInfo')
      wx.removeStorageSync('realUserInfo')
      wx.reLaunch({
        url: '/pages/login/main'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .me {
    width: 100%;
    height: 100%;
    background-color: rgb(248, 248, 248);
    position: relative;
    > .userInfo {
      width: 100%;
      height: 160px;
      background-color: white;
      border-bottom: 1px solid rgb(238, 238, 238);
      margin-bottom: 15px;
      > .noLogin {
        width: 100%;
        padding-top: 20px;
        box-sizing: border-box;
        > .user-icon {
          width: 75px;
          height: 75px;
          border-radius: 50%;
          overflow: hidden;
          margin: 0 auto 5px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        > .login-btn {
          width: 96px;
          margin: 0 auto;
          > button {
            width: 100%;
            font-size: 14px;
          }
        }
      }
      > .hasLogin {
        width: 100%;
        padding-top: 20px;
        box-sizing: border-box;
        > .user-icon {
          width: 75px;
          height: 75px;
          border-radius: 50%;
          overflow: hidden;
          margin: 0 auto 5px;
          > .img {
            width: 100%;
            height: 100%;
          }
        }
        > .user-name {
          text-align: center;
        }
      }
    }
    > .setting {
      > .detail {
        margin-bottom: 15px;
        .recharge-dueTime {
          font-size: 14px;
          color: $color-default;
        }
        .recharge-noDueTime {
          font-size: 14px;
          color: lightgray;
        }
      }
    }
    > .logout {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 10px;
      width: 90%;
      margin: 0 auto;
    }
  }
</style>
